<!--
 * @Descripttion: 
 * @version: 1.0
 * @Author: Sam
 * @Date: 2022-04-07 20:18:30
 * @LastEditors: Sam
 * @LastEditTime: 2022-04-08 17:32:54
-->
<template>
    <div class="app-container">
        <div class="tech-border">
            <el-card>
                <div slot="header" class="clearfix">
                    <dv-decoration-7 style="width:180px;height:30px;;"> <p style="padding: 0 15px;">巡检任务列表</p>  </dv-decoration-7>
                </div>
                <div class="filter-container">
                        <el-select v-model="listQuery.task_name" placeholder="请选择巡检任务名称" clearable style="width: 200px;margin-right: 10px;" class="filter-item" @keyup.enter.native="handleFilter" >
                            <el-option  label="选项1" value="选项1"></el-option>
                        </el-select>
                        <el-select v-model="listQuery.customer_id" placeholder="请选择所属客户" clearable style="width: 200px;margin-right: 10px;" class="filter-item" @keyup.enter.native="handleFilter" >
                            <el-option  label="选项1" value="选项1"></el-option>
                        </el-select>
                        <el-select v-model="listQuery.project_id" placeholder="请选择所属项目" clearable style="width: 200px;margin-right: 10px;" class="filter-item" @keyup.enter.native="handleFilter" >
                            <el-option  label="选项1" value="选项1"></el-option>
                        </el-select>

                    <el-button v-waves  class="filter-item" type="primary" icon="el-icon-search" @click="handleFilter">
                    {{ '搜索' }}
                    </el-button>
                <el-button v-waves :disabled="!checkPermission(['inspectiontask.create'])"  class="filter-item" type="primary" icon="el-icon-plus" @click="handleCreate">
                    {{ "添加" }}
                </el-button>  



                </div>
                <el-table
                    :header-cell-style="{background:'#eef1f6',color:'#606266'}"
                    :data="list"
                    border
                    fit
                    class="table-container"
                    highlight-current-row
                    style="width: 100%"
                    >  
                    
                  <el-table-column  align="center" label="巡检批次号">
                    <template slot-scope="scope">
                        <span>{{ scope.row.task_code }}</span>
                    </template>
                </el-table-column>
                <el-table-column  align="center" label="巡检任务名称">
                    <template slot-scope="scope">
                        <span>{{ scope.row.task_name }}</span>
                    </template>
                </el-table-column>
                <el-table-column  align="center" label="所属客户">
                    <template slot-scope="scope">
                        <span>{{ scope.row.customer_name }}</span>
                    </template>
                </el-table-column>
                <el-table-column  align="center" label="所属项目">
                    <template slot-scope="scope">
                        <span>{{ scope.row.project_name }}</span>
                    </template>
                </el-table-column>
                <el-table-column  align="center" label="所属建筑">
                    <template slot-scope="scope">
                        <span>{{ scope.row.building_name }}</span>
                    </template>
                </el-table-column>
                <el-table-column  align="center" label="所属楼层">
                    <template slot-scope="scope">
                        <span>{{ scope.row.floor_name }}</span>
                    </template>
                </el-table-column>
                <el-table-column  align="center" label="总巡检点位">
                    <template slot-scope="scope">
                        <span>{{ scope.row.total_points }}</span>
                    </template>
                </el-table-column>
                <el-table-column  align="center" label="正常点位">
                    <template slot-scope="scope">
                        <span>{{ scope.row.normal_points }}</span>
                    </template>
                </el-table-column>
                <el-table-column  align="center" label="待修点位">
                    <template slot-scope="scope">
                        <span>{{ scope.row.repair_points }}</span>
                    </template>
                </el-table-column>
                <el-table-column  align="center" label="待换点位">
                    <template slot-scope="scope">
                        <span>{{ scope.row.replace_points }}</span>
                    </template>
                </el-table-column>
                <el-table-column  align="center" label="丢失点位">
                    <template slot-scope="scope">
                        <span>{{ scope.row.lost_points }}</span>
                    </template>
                </el-table-column>
                <el-table-column  align="center" label="巡检员">
                    <template slot-scope="scope">
                        <span>{{ scope.row.inspector_name }}</span>
                    </template>
                </el-table-column>
                <el-table-column  align="center" label="计划巡检时间">
                    <template slot-scope="scope">
                        <span>{{ scope.row.scheduled_time }}</span>
                    </template>
                </el-table-column>

                    <el-table-column align="center" width="250" :label="'操作'">
                    <template slot-scope="scope">
                        
                        <el-button v-waves v-permission="['inspectiontask.edit']"  type="primary"  size='mini' icon="el-icon-edit" @click="handleEdit(scope.$index, scope.row)">
                            {{ "编辑" }}
                        </el-button>
                        <el-button v-waves v-permission="['inspectiontask.delete']"  type="danger" :destroy-on-close="true" size='mini' icon="el-icon-delete" @click="handleDelete(scope.$index, scope.row)">
                            {{ "删除" }}
                        </el-button>
                    </template>
                    </el-table-column>
                </el-table>

                <pagination v-show="total>0" :total="total" :page.sync="listQuery.page" :limit.sync="listQuery.limit" @pagination="getList" />
            </el-card>
        
        </div>
        <el-dialog  width="750px"   :visible.sync="edit.dialogVisible"  :show-close="false" @close="getList" >
            <dv-border-box-11  class="el-new-dialog" title="编辑巡检计划">
                <edit  :project_list="project_list" :admin_list="admin_list"  :item="edit" />
            </dv-border-box-11>
        </el-dialog>


        <el-dialog  width="750px"  :visible.sync="create.dialogVisible"  :show-close="false" @close="getList" >
            <dv-border-box-11  class="el-new-dialog" title="添加巡检计划">
                <create  :project_list="project_list"  :admin_list="admin_list" :item="create" />
            </dv-border-box-11>
        </el-dialog>
    </div>
</template>
<script>
    import waves from '@/directive/waves' // waves directive
    import permission from '@/directive/permission/index.js' // 权限判断指令
    import checkPermission from '@/utils/permission' // 权限判断函数
    import { list, detail, del } from '@/api/inspectiontask' // api接口
    import { parseTime } from '@/utils' // 时间格式化函数
    import { getToken } from '@/utils/auth' // 获取token
    import Pagination from '@/components/Pagination' // 分页组件
    import Create from './components/create' // 添加组件  
    import Edit from './components/edit'  // 编辑组件  
    import {commonApi} from '@/api/common' // 公共接口

    export default{
        name: 'inspectiontaskIndex',
        components: { Pagination,Create,Edit }, // 引入组件
        filters: {
            parseTime // 时间过滤器
        },
        directives: { waves, permission }, // 引入指令
          data() {
            return {
             headerObj: {
                'Authorization': 'Bearer ' + getToken()
            },
            list: [], // 列表数据
            total: 0, // 总条数
            project_list: [], // 项目列表
            admin_list: [], // 管理员列表
            select_ids : [], // 选中的id集合
            listQuery: { //列表查询参数
                page: 1,
                limit: 10
            },
             create: { // 新增
                 dialogVisible: false
                },  
            edit: { // 编辑
                 dialogVisible: false,
                 id: ''
            },  

            }
        },
          created() {
            this.init()
            this.getList()
        },
        methods: {
            init() { // 初始化数据
                commonApi.get_project().then(response => {
                    this.project_list = response.data
                })
                commonApi.get_admin().then(response => {
                    this.admin_list = response.data
                })
            },
            checkPermission, // 权限判断函数
            handleFilter() { // 查询
                this.listQuery.page = 1
                this.getList()
            },
            getList() { // 获取列表
                list(this.listQuery).then(response => {
                        this.list = response.data.data
                        this.total = response.data.total
                    })
                },
        handleCreate() { // 新增对话框显示
            this.create.dialogVisible = true
        },  
        handleEdit(index, row) { // 编辑对话框显示
            this.edit.dialogVisible = true
            this.edit.id = row.id
        },  
        handleDelete(index, row) { // 删除
            const thiz = this
            this.$confirm('确认要删除吗？', '提示', {
                confirmButtonText: '确定',
                cancelButtonText: '取消',
                type: 'warning'
            }).then(() => {
                del(row.id).then(() => {
                this.$message({
                    message: '删除成功',
                    type: 'success',
                    duration: 1500,
                    onClose() {
                        thiz.list.splice(index, 1)
                    }
                })
                })
            }).catch(() => {

            })
        },   

            }
    }
</script>

